<template>
    <div ref="echartDom"></div>
</template>

<script setup lang="ts">
import {inject, ref, shallowRef, onMounted, onUnmounted, watchEffect, defineExpose} from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => ({}),
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  },
});

// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const wjdata = ref();
const zgdata = ref();

wjdata.value = props.housingSupplyStatsData.outCircle;
zgdata.value = props.housingSupplyStatsData.innerCircle;

// echarts初始化渲染
const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const option = {
      tooltip: {
        trigger: "item",
        formatter: function (params: any) {
            return params.seriesName + "<br>" + params.name + "：" + params.value + " " + "(" + params.percent + "%)" + '<br>' +
              `同比增长率：${params.data.tb}%` + '<br>' + `环比增长率：${params.data.hb}%`
        },
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(40,252,255,0.6)",
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.9)",
          },
        },
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(18 * props?.dialogData?.fontSizeTimes),
        },
        backgroundColor: "rgba(8, 64, 132, 0.9)",
      },
      title: {},
      series: [
        {
          name: "贷款比例",
          type: "pie",
          position: "inside",
          radius: [0, "45%"],
          label: {
            show: true,
            padding: [0, pxToRem(-40 * props?.dialogData?.fontSizeTimes)],
            textStyle: {
              fontSize: pxToRem(14 * props?.dialogData?.fontSizeTimes),
              color: "#fff",
            },
          },
          labelLine: {
            show: true, // 显示指示线
            length: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 10 : 35)
          },
          labelLayout: {
            verticalAlign: "bottom",
            dy: pxToRem(-5 * props?.dialogData?.fontSizeTimes),
          },
          data: zgdata.value,
        },
        {
          name: "贷款方式",
          type: "pie",
          radius: ["70%", "90%"],
          label: {
            show: false,
          },
          data: wjdata.value,
        },
      ],
    };
    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  props.housingSupplyStatsData;
  wjdata.value = props.housingSupplyStatsData.outCircle;
  zgdata.value = props.housingSupplyStatsData.innerCircle;
  getEchart();
};

defineExpose({
  updateChart
})

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
<style scoped lang="less">
.h190 {
  height: 190px;
}
.dialig-h190 {
  width: 960px;
  height: 500px;
}
</style>
